<div class="period-filter-container">
  <!--period type and year selection block-->
  <div class="period-top-section">
    <div class="period-type-section">
      <select
        [(ngModel)]="selectedPeriodType"
        (change)="updatePeriodType(selectedPeriodType, $event)"
        class="form-control input-sm pull-left"
      >
        <option [value]="''" disabled>Select period type</option>
        <option
          *ngFor="let periodType of periodTypes"
          [value]="periodType.value"
          [hidden]="!periodType.shown"
        >{{periodType.name}}</option>
      </select>
    </div>
    <div class="period-year-section">
      <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-outline-secondary" (click)="pushPeriodBackward($event)">Prev Year</button>
        <button type="button" class="btn btn-outline-secondary" (click)="pushPeriodForward($event)" [disabled]="selectedYear === currentYear">Next Year</button>
      </div>
    </div>
  </div>
  <!--end of period type and year selection block-->

  <!--period available and selected section-->
  <div class="period-header">
    <div class="period-available-header">
      <span>Available ({{availablePeriods.length}})</span>
      <a (click)="selectAllPeriods($event)">&raquo;</a>
    </div>
    <div class="period-selected-header">
      <a (click)="deselectAllPeriods($event)">&laquo;</a>
      <span>Selected ({{selectedPeriods.length}})</span>
    </div>
  </div>
  <!--end of period available and selected section-->

  <!--period body-->
  <div class="period-body">
    <div class="period-available-body">
      <ul class="period-list">
        <li
          *ngFor="let availablePeriod of availablePeriods"
        >
          <a (click)="togglePeriod(availablePeriod, $event)">
            {{availablePeriod.name}}
          </a>
        </li>
      </ul>
    </div>
    <div class="period-selected-body">
      <ul class="period-list">
        <li
          *ngFor="let selectedPeriod of selectedPeriods$ | async"
        >
          <a (click)="togglePeriod(selectedPeriod, $event)">
            {{selectedPeriod.name}}
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!--end of period body-->

  <!--period footer-->
  <div class="period-filter-btns">
    <div>
      <button class="btn btn-sm btn-outline-secondary" (click)="updatePeriod($event)">Update</button>
      <button class="btn btn-sm btn-outline-secondary" (click)="closePeriodFilter($event)">Close</button>
    </div>
  </div>
  <!--end of period footer-->
</div>
